<template>
	<view class="page">
		<!-- 顶部文字 start -->
		<view class="head">
			<view class="one">
				<view class="title">
					Hi，{{userInfo.nickname}}
				</view>
				<view class="title">
					欢迎加入道友
				</view>
			</view>
			<view class="tow">
				选择您的兴趣爱好，有助于匹配圈子和道友
			</view>
		</view>
		<!-- 顶部文字 end -->

		<!-- 爱好选择 start -->
		<view class="honor-box">
			<button class="honor" :class="honor.choose" @tap="chooseHonor(honor)" v-for="(honor, ind) in honors" :key="ind">{{honor.value}}</button>
		</view>

		<button class="confirm" v-if="!from" @tap="toMain" :disabled="disNext">寻找道友</button>
		<button class="confirm" v-else @tap="toMain" :disabled="disNext">去建圈</button>
		<!-- 爱好选择 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				honors: [],
				chooseHonors: [],
				from: ''
			}
		},
		computed: {
			disNext(){
				if(this.chooseHonors.length < 1){
					return true;
				}else{
					return false;
				}
			}
		},
		onLoad(option) {
			this.userInfo = this.getGlobalUser("globalUser");
			this.getHonorArr();
			this.from = option.from;
			if(this.userInfo != null && this.userInfo.honors != null && this.userInfo.honors.length > 0){
				this.chooseHonors = this.userInfo.honors.split(",");
			}
		},
		methods: {
			chooseHonor(e) {
				if(!this.from){
					if (e.choose == 'choose') {
						e.choose = '';
						for (var i = 0; i < this.chooseHonors.length; i++) {
							if(this.chooseHonors[i] == e.id) (
								this.chooseHonors.splice(i,1)
							)
						}
					} else {
						// if(this.chooseHonors.length < 5){
							e.choose = 'choose';
							this.chooseHonors.push(e.id);
						// }
					}
				}else{
					this.chooseHonors = [];
					for (var i = 0; i < this.honors.length; i++) {
						this.honors[i].choose = '';
					}
					e.choose = 'choose';
					this.chooseHonors.push(e.id);
				}
				console.log(this.chooseHonors)
			},
			toMain() {
				if(!this.from){
					this.$apis.saveHonors({id: this.userInfo.id,honors: this.chooseHonors.join(",")}).then((res) => {
						this.userInfo = res;
						uni.setStorageSync("globalUser",this.userInfo)
						this.chooseHonors = this.userInfo.honors.split(",");
						uni.switchTab({
							url: '../../main/main/main'
						})
					});
				}else{
					uni.navigateTo({
						url: '../../main/circleInfo/addCircle/addCircle?type=' + this.chooseHonors[0]
					})
				}
			},
			getHonorArr() {
				var me = this;
				this.$apis.getDictByType({type: 3,parentId : 0}).then((res) => {
				    var honors = res;
				    me.honors = honors;
				    var userInfo = me.getGlobalUser("globalUser");
				    if (!this.from && me.honors != null && userInfo.honors.length > 0) {
				    	honors = userInfo.honors.split(",");
				    	for (var i = 0; i < honors.length; i++) {
				    		for (var j = 0; j < me.honors.length; j++) {
				    			if(honors[i] == me.honors[j].id){
				    				me.honors[j].choose = 'choose';
				    			}
				    		}
				    	}
				    }
				});
			}
		}
	}
</script>

<style>
	.honor-box {
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: 90%;
	}

	.honor {
		width: 30%;
		border: 1.5px dashed #EDF1FB;
		color: #668AE1;
		background-color: #FFFFFF;
		border-radius: 35upx;
		margin-top: 50upx;
		height: 70upx;
		line-height: 70upx;
	}

	.choose {
		background-color: #EDF2FE;
		color: #5080FE;
	}
	
	.title {
		line-height: 56upx;
	}
</style>
